<script setup lang="ts">
import { ref } from 'vue';
import ChatSidebar from '../components/chat/ChatSidebar.vue';
import ChatArea from '../components/chat/ChatArea.vue';
import MindMapView from './MindMapView.vue';

// 添加侧边栏展开/收缩状态
const isSidebarExpanded = ref(true);
// 添加思维导图显示状态
const showMindMap = ref(false);
// 存储mermaid代码
const mindMapData = ref<string>('');

// 处理侧边栏状态变化
function handleSidebarToggle(expanded: boolean) {
  isSidebarExpanded.value = expanded;
}

// 处理显示思维导图事件
function handleShowMindMap(code: string) {
  mindMapData.value = code;
  showMindMap.value = true;
}

// 关闭思维导图
function handleCloseMindMap() {
  showMindMap.value = false;
}
</script>

<template>
  <div class="app-container" :class="{ 
    'sidebar-collapsed': !isSidebarExpanded,
    'mindmap-open': showMindMap
  }">
    <ChatSidebar @toggle-sidebar="handleSidebarToggle" />
    <ChatArea @show-mindmap="handleShowMindMap" />
    <MindMapView 
      v-if="showMindMap" 
      :mermaid-code="mindMapData"
      @close="handleCloseMindMap"
    />
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  height: calc(100vh - 60px);
  background-color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 0;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

/* 当侧边栏收缩时的样式 */
.app-container.sidebar-collapsed {
  width: 100%;
}

/* 当思维导图打开时的样式 */
.app-container.mindmap-open {
  width: 100%;
}

.app-container.mindmap-open .mindmap-view {
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
  height: 100vh;
  z-index: 1000;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
    height: 100vh;
    width: 100%;
    position: relative;
  }

  .app-container.mindmap-open .mindmap-view {
    width: 100%;
    height: 100vh;
  }
  
  /* 确保聊天区域在侧边栏收缩时占据整个屏幕 */
  .app-container.sidebar-collapsed .chat-area-container {
    width: 100%;
    margin-left: 0;
  }
}
</style>